<template>
    <div class='w100 h100' id="container">

    </div>
</template>

<script>
import Highcharts from "highcharts/highstock";
import Highcharts3D from "highcharts/highcharts-3d";
Highcharts3D(Highcharts);
export default {
    name: '',
    components: {},
    data() {
        return {
            option: {}
        }
    },
    created() { },
    mounted() {


        var chart = Highcharts.chart('container', {
            chart: {
                type: 'column',
                backgroundColor: 'transparent',
                // polar: true,
            },
            title: {
                text: '堆叠柱形图'
            },
            xAxis: {
                categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                stackLabels: {  // 堆叠数据标签
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        '总量: ' + this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    maxPointWidth: 30, //柱子宽度
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                            textOutline: '1px 1px black'
                        }
                    }
                }
            },
            series: [
                {
                    name: '小彭',
                    data: [2, 2, 3, 2, 1]
                }, {
                    name: '小张',
                    data: [5, 3, 4, 7, 2]
                },]
        });


        // var chartDom = document.getElementById('main-chart4');
        // var myChart = this.$echarts.init(chartDom);


        // myChart.setOption(this.option);


    },
    methods: {}
}
</script>
<style scoped lang='scss'>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;

}
</style>
